<script setup lang="ts">
defineProps<{
   
}>()

import { computed, ref,onMounted  } from 'vue';


</script>

<template>
    <div class="chrome-icon">			
        <div class="out">
            <div class="red"></div>
            <div class="green"></div>
            <div class="yellow"></div>
        </div>
        <div class="center"></div>
        <div class="in"></div>
    </div>
</template>

<style scoped>    
		.chrome-icon{
            position: relative;
            font-size: 1em;
		}

        .chrome-icon .out{
            position: relative;
            width: 5em;
            height: 5em;
            border-radius: 50%;
            background-color: rgb(249, 192, 29);
            overflow: hidden;
        }
        .chrome-icon .out .red{
            width: 5em;
            height: 4.5em;
            /* border-radius: 50%; */
            background-color: rgb(234, 67, 53);
            position: absolute;
            top: 0;
            left: 0;
            transform: rotateZ(-45deg);
            transform-origin: 0 0;
        }
        .chrome-icon .out .green{
            width: 4.8em;
            height: 5em;
            /* border-radius: 50%; */
            background-color: rgb(36, 149, 68);
            position: absolute;
            top: 0;
            left: 0;
            transform: rotateZ(45deg);
            transform-origin: 0 0;
        }
        .chrome-icon .out .yellow{
            width: 5em;
            height: 1.9em;
            /* border-radius: 50%; */
            background-color: rgb(249, 192, 29);
            position: absolute;
            top: 1.4em;
            left: 2em;
            /* transform: rotateZ(-90deg);
            transform-origin: 100% 100%; */
        }
        .chrome-icon .center{
            width: 2.5em;
            height: 2.5em;
            border-radius: 50%;
            background-color: #fff;
            position: absolute;
            top: 1.25em;
            left: 1.25em;
        }
        .chrome-icon .in{
            width: 2em;
            height: 2em;
            border-radius: 50%;
            background-color: rgb(47, 125, 239);
            position: absolute;
            top: 1.5em;
            left: 1.5em;
        }
    

</style>